<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import api from '@/apis'
const { t } = useI18n()
const show = ref(false)
const dateSelect = ref([
  {
    text: '近一个月',
    value: '1'
  },
  {
    text: '近三个月',
    value: '2'
  },
])
const showPopover = ref(false)
const showPopover2 = ref(false)
const showPopover3 = ref(false)
const showPopover4 = ref(false)
</script>
<template>
  <div class="record">
    <div class="mt-30px flex items-center justify-between">
      <div class=" flex items-center">
        <div class="w-10px h-32px bg-[#F76938] rounded-[154px]"></div>
        <div class="text-32px text-[#FFFFFF] font-700 font-roboto line-height-32px ml-12px">
          历史记录
        </div>
      </div>
      <div class=" flex items-center">
        <div class="text-[#fff]/50 text-[24px] font-roboto font-400 capitalize mr-4px">更多</div>
        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 21 20" fill="none">
          <path
            d="M3.94354 17.0419L3.94354 3.00814C3.94354 2.23151 4.56678 1.60341 5.34345 1.60341C5.70449 1.60341 6.03107 1.742 6.27846 1.96447L15.5387 8.9045C16.152 9.36955 16.2808 10.2452 15.8157 10.8634C15.7366 10.9722 15.6424 11.0663 15.5386 11.1404L6.17963 18.1599C5.5662 18.6199 4.68588 18.4962 4.22569 17.878C4.0327 17.6256 3.94368 17.3337 3.94368 17.0419L3.94354 17.0419Z"
            fill="white" fill-opacity="0.5" />
        </svg>
      </div>
    </div>
    <div class="flex items-center justify-between mt-34px">
      <div class="flex items-center gap-60px">
        <van-popover v-model:show="showPopover" theme="dark" :actions="dateSelect" :show-arrow="false" :offset="[30, 0]">
          <template #reference>
            <div class="flex items-center">
              <div class=" mr-10px text-[#FFFFFF99] text-[24px] font-HarmonyOS font-500 line-height-[40px]">
                全部类型
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 21 20" fill="none">
                <path
                  d="M3.8795 3.89844H17.9133C18.6899 3.89844 19.318 4.52167 19.318 5.29835C19.318 5.65938 19.1794 5.98596 18.957 6.23335L12.0169 15.4936C11.5519 16.1069 10.6763 16.2357 10.058 15.7706C9.94921 15.6915 9.85519 15.5973 9.781 15.4935L2.7615 6.13452C2.30159 5.5211 2.42523 4.64077 3.04347 4.18059C3.29586 3.9876 3.5877 3.89858 3.8795 3.89858V3.89844Z"
                  fill="white" fill-opacity="0.5" />
              </svg>
            </div>
          </template>
        </van-popover>
        <van-popover v-model:show="showPopover3" theme="dark" :actions="dateSelect" :show-arrow="false">
          <template #reference>
            <div class="flex items-center">
              <div class=" mr-10px text-[#FFFFFF99] text-[24px] font-HarmonyOS font-500 line-height-[40px]">
                全部状态
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 21 20" fill="none">
                <path
                  d="M3.8795 3.89844H17.9133C18.6899 3.89844 19.318 4.52167 19.318 5.29835C19.318 5.65938 19.1794 5.98596 18.957 6.23335L12.0169 15.4936C11.5519 16.1069 10.6763 16.2357 10.058 15.7706C9.94921 15.6915 9.85519 15.5973 9.781 15.4935L2.7615 6.13452C2.30159 5.5211 2.42523 4.64077 3.04347 4.18059C3.29586 3.9876 3.5877 3.89858 3.8795 3.89858V3.89844Z"
                  fill="white" fill-opacity="0.5" />
              </svg>
            </div>
          </template>
        </van-popover>
        <van-popover v-model:show="showPopover4" theme="dark" :actions="dateSelect" :show-arrow="false">
          <template #reference>
            <div class="flex items-center">
              <div class=" mr-10px text-[#FFFFFF99] text-[24px] font-HarmonyOS font-500 line-height-[40px]">
                正序
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 21 20" fill="none">
                <path
                  d="M3.8795 3.89844H17.9133C18.6899 3.89844 19.318 4.52167 19.318 5.29835C19.318 5.65938 19.1794 5.98596 18.957 6.23335L12.0169 15.4936C11.5519 16.1069 10.6763 16.2357 10.058 15.7706C9.94921 15.6915 9.85519 15.5973 9.781 15.4935L2.7615 6.13452C2.30159 5.5211 2.42523 4.64077 3.04347 4.18059C3.29586 3.9876 3.5877 3.89858 3.8795 3.89858V3.89844Z"
                  fill="white" fill-opacity="0.5" />
              </svg>
            </div>
          </template>
        </van-popover>
      </div>
      <van-popover v-model:show="showPopover2" theme="dark" :actions="dateSelect" :show-arrow="false"
        :offset="[-40, 0]">
        <template #reference>
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 39 36" fill="none">
              <path
                d="M32.1154 10.045C32.312 9.86058 32.533 9.65249 32.6765 9.41491C33.7522 8.15958 33.8807 6.25946 32.9781 4.88045C32.0689 3.49143 30.7212 2.78711 28.9727 2.78711H7.3326C6.91326 2.78711 6.47993 2.78711 6.10258 2.89898C5.17863 3.10907 4.33333 3.62242 3.72071 4.34587C3.09669 5.08243 2.75311 5.99297 2.75311 6.90964C2.75311 8.09915 3.23528 9.15334 4.11129 9.87946C6.89389 12.4055 9.67199 15.0161 12.3602 17.5433V25.8842L12.3648 25.9544C12.5109 27.0527 13.3984 27.6526 14.4726 27.2189L14.4913 27.2106C15.0725 26.9376 15.4057 26.3876 15.4057 25.7018V17.1268C15.4057 16.548 15.2159 16.076 14.8415 15.724C13.4988 14.4616 12.1758 13.1497 10.8966 11.8808C9.57771 10.5727 8.21381 9.22 6.78831 7.87995L6.71849 7.81364L6.63435 7.77462C6.61452 7.76182 6.57077 7.70818 6.53756 7.66718C6.5011 7.62278 6.46557 7.58077 6.42825 7.54245C6.18209 7.24598 6.13018 6.99401 6.24511 6.65402C6.44492 6.22891 6.84561 5.74104 7.33242 5.74104H29.1666C29.4325 5.74104 29.6888 5.87604 29.8882 6.1214C30.1469 6.43984 30.2431 6.86088 30.1367 7.22843C30.0824 7.43178 29.9922 7.52389 29.7195 7.78074C26.7129 10.5157 23.8411 13.2152 20.8007 16.0731L20.7846 16.0885C20.4765 16.3777 20.1231 16.7987 20.1231 17.4915V31.9052C20.1231 32.0824 20.1231 32.5818 20.5113 32.9814C20.5113 32.9814 20.6293 33.2316 21.1376 33.4133C21.7659 33.6378 22.3797 33.3821 22.3797 33.3821L22.5399 33.2694C23.1686 32.8259 23.1686 32.1353 23.1686 31.7225V18.0907C24.672 16.6808 26.2298 15.3093 27.7373 13.9823C29.2725 12.6313 30.7222 11.3549 32.1154 10.045H32.1154ZM35.4744 28.512H27.2257C26.364 28.512 25.8489 29.1703 25.8489 29.8068V30.172C25.8489 30.9824 26.5488 31.4665 27.2257 31.4665H35.4744C36.3366 31.4665 36.8516 30.8084 36.8516 30.172V29.8068C36.8516 29.0324 36.2982 28.512 35.4744 28.512V28.512ZM35.4744 23.8599H27.2257C26.364 23.8599 25.8489 24.5182 25.8489 25.1547V25.4279C25.8489 26.2386 26.5488 26.7229 27.2257 26.7229H35.4744C36.3366 26.7229 36.8516 26.0646 36.8516 25.4279V25.1547C36.8516 24.5182 36.3366 23.8599 35.4744 23.8599ZM35.4744 19.3899H27.2257C26.364 19.3899 25.8489 20.0482 25.8489 20.6847V20.8672C25.8489 21.6773 26.5488 22.1616 27.2257 22.1616H35.4744C36.3366 22.1616 36.8516 21.5035 36.8516 20.8672V20.6847C36.8516 19.9102 36.2982 19.3899 35.4744 19.3899Z"
                fill="white" fill-opacity="0.5" />
            </svg>
          </div>
        </template>
      </van-popover>
    </div>
    <div class="flex flex-col gap-30px mt-16px">
      <div class="p-30px rounded-[16px] bg-[#282828]" v-for="(value, index) in 10" :key="index">
        <div class="flex items-center justify-between">
          <div class="text-[#fff]/60 text-[24px] font-roboto font-400">累计收益(X)</div>
          <div class="bg-[#F76938] rounded-[10px] text-[#fff] text-[22px] font-400 font-roboto px-20 py-10">收益中</div>
        </div>
        <div class="text-[#fff] text-[46px] font-roboto font-800">27.509</div>
        <div class="flex flex-col gap-24px mt-12px">
          <div
            class="flex items-center justify-between w-100% text-[#fff]/60 text-[24px] font-pingfang font-400 line-height-32px">
            <div class="flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 13 13" fill="none">
                <circle cx="6.86377" cy="6.81348" r="6" fill="#F76938" />
              </svg>
              <div class="ml-8px">X数量：</div>
            </div>
            <div>10000</div>
          </div>
          <div
            class="flex items-center justify-between w-100% text-[#fff]/60 text-[24px] font-pingfang font-400 line-height-32px">
            <div class="flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 13 13" fill="none">
                <circle cx="6.86377" cy="6.81348" r="6" fill="#F76938" />
              </svg>
              <div class="ml-8px">X数量：</div>
            </div>
            <div>10000</div>
          </div>
          <div
            class="flex items-center justify-between w-100% text-[#fff]/60 text-[24px] font-pingfang font-400 line-height-32px">
            <div class="flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 13 13" fill="none">
                <circle cx="6.86377" cy="6.81348" r="6" fill="#F76938" />
              </svg>
              <div class="ml-8px">周期：</div>
            </div>
            <div>320/360天</div>
          </div>
          <div
            class="flex items-center justify-between w-100% text-[#fff]/60 text-[24px] font-pingfang font-400 line-height-32px">
            <div class="flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 13 13" fill="none">
                <circle cx="6.86377" cy="6.81348" r="6" fill="#F76938" />
              </svg>
              <div class="ml-8px">时间：</div>
            </div>
            <div>2025-10-10 12:00:00</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.record {
  width: 100%;
  min-height: 100vh;
  background: #101010;
}
</style>
